import { defineComponent } from "vue";
import LogoComponent from "./components/logo/LogoComponent";
import SideBarComponent from "./components/sidebar/SideBarComponent";
import { RouterView } from "vue-router";
import TopBarComponent from "./components/topbar/TopBarComponent";
import FooterComponent from "./components/footer/FooterComponent";
import { useApp } from "@/pinia/modules/app";

export default defineComponent({
  name: "App",
  components: {
    LogoComponent,
    TopBarComponent,
    SideBarComponent,
  },
  setup() {
    const { isCollapsed } = storeToRefs(useApp());
    return () => (
      <el-container class="h-screen">
        <el-aside
          class="aside-border-right bg-color-[#fff]"
          width={isCollapsed.value ? "64px" : "240px"}
        >
          <LogoComponent />
          <SideBarComponent />
        </el-aside>
        <el-container direction="vertical">
          <TopBarComponent />
          <el-main class="p-10px">
            <div class="bg-color-[#fff] p-10px rounded-5px">
              <RouterView />
            </div>
          </el-main>
          <FooterComponent />
        </el-container>
      </el-container>
    );
  },
});
